<template>
	<view class="record">
		<block v-if="show">
			<view class="record-list">
				<view class="record-item" v-for="(data,index) in list" :key="index">
					<view class="image"><image :src="data.prize_img" mode="aspectFit"></image></view>
					<view class="prize-name">
						<view class="name">奖品:{{data.prize}}</view>
						<view class="time">中奖时间:{{data.add_time}}</view>
					</view>
					<view class="btn" v-if="data.type==1 && data.shipping_status==0" @click="goForm(data)">填写地址</view>
					<view class="btn-1" v-if="data.type==1 && data.shipping_status==1" @click="look(data)">查看地址</view>
				</view>
			</view>
			<pt-nothing 
				text="暂无中奖记录" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png" 
				:fixed="true" 
				bgColor="#FFF"
				v-if="!list.length">
			</pt-nothing>
		</block>
		<uni-popup type="bottom" ref="address" @change="change">
			<view class="address-form">
				<view class="address-form-input">
					<view class="label" style="font-weight: bold; color: #141414;font-size: 30rpx;">奖品名称：{{giftData.prize}}</view>
				</view>
				<view class="address-form-input">
					<view class="label">姓名：</view>
					<input type="text" placeholder="请输入姓名" v-model="form.accept_name" :disabled="is_check" />
				</view>
				<view class="address-form-input">
					<view class="label">手机号码：</view>
					<input type="number" placeholder="请输入电话" v-model="form.mobile_phone"  :disabled="is_check" maxlength="11"/>
				</view>
				<view class="address-form-input">
					<view class="label">地址：</view>
					<input type="text" placeholder="请输入真实有效的收货地址" v-model="form.address" :disabled="is_check" />
				</view>
				<view class="address-form-btn" @click="confirm" v-if="!is_check">确定</view>
			</view>
		</uni-popup>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				form: {
					accept_name: '',
					mobile_phone: '',
					address: '',
				},
				giftData: '',
				is_check: false,
				rid: ''
			};
		},
		onLoad(options) {
			this.init()
			if(options.rid){
				this.rid = options.rid
			}
		},
		methods: {
			init(){
				this.$u.api.LotteryRecord({limit: 100}).then(res => {
					this.show = true
					this.list = res.datas.list
					if(this.rid){
						this.list.forEach(item => {
							if(item.record_id==this.rid){
								this.giftData = item
								this.$refs.address.open()
							}
						})
					}
				})
			},
			goForm(data){
				this.giftData = data
				this.$refs.address.open()
			},
			change(e){
				if(!e.show){
					this.giftData = ''
					this.form = {
						accept_name: '',
						mobile_phone: '',
						address: '',
					}
					setTimeout(() => {
						this.is_check = false
					},500)
				}
			},
			look(data){
				this.is_check = true
				this.giftData = data
				this.form = {
					accept_name: data.accept_name,
					mobile_phone: data.mobile_phone,
					address: data.address
				}
				this.$refs.address.open()
			},
			confirm(){
				uni.showModal({
					title: '温馨提示',
					content: '提交后不可更改，请确认收货地址是否真实有效?',
					confirmText: '确定提交',
					success: (confirm) => {
						if(confirm.confirm){
							let data = {
								record_id: this.giftData.record_id,
								accept_name: this.form.accept_name,
								mobile_phone: this.form.mobile_phone,
								address: this.form.address
							}
							this.$u.api.SetAddress(data).then(res => {
								uni.showToast({
									icon: 'none',
									title: '提交成功',
									success: () => {
										if(this.rid){
											this.rid = ''
										}
										this.init()
										this.$refs.address.close()
									}
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fbfbfb;
	}
	.record-list{
		padding: 30rpx;
		.record-item{
			display: flex;
			align-items: center;
			background-color: #FFF;
			padding: 50rpx 50rpx 50rpx 20rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			&:last-child{
				margin-bottom: 30rpx;
			}
			.image{
				image{
					width: 150rpx;
					height: 150rpx;
				}
			}
			.prize-name{
				flex: 1;
				min-width: 0;
				margin: 0 20rpx;
				.name{
					font-weight: bold;
				}
				.time{
					font-size: 24rpx;
					color: #999;
					margin-top: 20rpx;
				}
			}
			.btn{
				width: 120rpx;
				line-height: 54rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				color: #1CADCF;
			}
			.btn-1{
				width: 120rpx;
				line-height: 54rpx;
				background: #1CADCF;
				text-align: center;
				font-size: 24rpx;
				color: #FFF;
				border-radius: 8rpx;
			}
		}
	}
	.address-form{
		background-color: #FFF;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		.address-form-input{
			margin-top: 30rpx;
			&:first-child{
				margin-top: 0;
			}
			.label{
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
			input{
				width: 100%;
				box-sizing: border-box;
				border: solid 1px #EEE;
				border-radius: 8rpx;
				padding: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
			}
		}
		.address-form-btn{
			background-color: #F59359;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			margin-top: 30rpx;
			border-radius: 8rpx;
			color: #FFF;
		}
	}
</style>
